<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, EffectCube } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/effect-cube'; // 引入 EffectCube 的样式

const modules = [Autoplay, EffectCube];
const swiperData = [
    {
        id: 1,
        title: '山河无言',
        describe: '山川不语，却以巍峨之姿诉说万年沧桑；江河无声，却用奔流之势见证文明流转。'
    },
    {
        id: 2,
        title: '墨中有禅',
        describe: '一笔浓淡，是笔墨与心灵的对话；一纸乾坤，藏着东方哲学的留白与顿悟。'
    },
    {
        id: 3,
        title: '烟火人间',
        describe: '炊烟升起处，是尘世最朴素的修行；喧嚣市井间，藏着生命最真实的答案。'
    },
    {
        id: 4,
        title: '四时如歌',
        describe: '春生夏长，秋收冬藏，天地以节气为韵脚，写下永恒的自然诗篇。'
    }
];

const getSwiperUrl = (index) => {
    return new URL(`../assets/image/home-public/img/${index}.jpg`, import.meta.url).href;
}

const swiperOptions = {
    autoplay: {
        delay: 3000, // 调整展示时间
        disableOnInteraction: false
    }
};

const activeIndex = ref(0);

onMounted(() => {
    // 确保初始slide显示动画
    nextTick(() => {
        activeIndex.value = 0;
    });
});

const onSlideChange = (swiper) => {
    // 移除延迟，立即更新状态
    activeIndex.value = swiper.realIndex;
};
</script>

<template>
    <div class="swiper-container">
        <swiper class="swiper" :modules="modules" :slides-per-view="1" :space-between="20" :loop="true" effect="cube"
            :cube-effect="{ shadow: true, slideShadows: true, shadowOffset: 20, shadowScale: 0.94 }"
            @slideChange="onSlideChange">
            <swiper-slide v-for="(item, index) in swiperData">
                <div class="slide-content-item">
                    <img :src="getSwiperUrl(item.id)" alt="">
                    <div class="describe" :class="{ 'active': activeIndex === index }">
                        <h2>{{ item.title }}</h2>
                        <p>{{ item.describe }}</p>
                    </div>
                </div>
            </swiper-slide>
        </swiper>
    </div>

</template>

<style lang="scss" scoped>
.swiper-container {
    width: 100%;
    height: 360px;
    overflow: hidden;
    user-select: none;
}


/* 媒体查询 */
@media screen and (max-width: 768px) {
    .swiper-container {
        height: 220px;
    }
}

.swiper {
    width: 100%;
    height: 100%;

    .slide-content-item {
        width: 100%;
        height: 100%;
        border-radius: var(--radius);
        overflow: hidden;
        position: relative;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .describe {
            position: absolute;
            bottom: 0;
            left: 0;
            color: #fff;
            padding: var(--space);
            width: 100%;
            box-sizing: border-box;
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(3px);
            transform: translateY(100%);

            h2 {
                font-weight: 600;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
                opacity: 0;
                transform: translateY(10px);
                transition: all 0.3s ease;
            }

            p {
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
                line-height: 1.5;
                opacity: 0;
                transform: translateY(10px);
                transition: all 0.3s ease;
            }

            &.active {
                transform: translateY(0);

                h2 {
                    opacity: 1;
                    transform: translateY(0);
                    transition-delay: 0.2s;
                }

                p {
                    opacity: 1;
                    transform: translateY(0);
                    transition-delay: 0.3s;
                }
            }

            @media screen and (max-width: 768px) {
                h2 {
                    font-size: 16px;
                    font-weight: normal;
                }

                p {
                    font-size: 14px;
                    font-weight: normal;
                }
            }
        }
    }
}
</style>
